WCAG 2.1 κ°μ΄λλΌμΈμ μ΄ν΄νκ³ κ΅¬ννμ¬ μ μΈκ³ μ¬μ©μλ₯Ό μν μ κ·Όμ± λμ λμ§νΈ κ²½νμ λ§λμΈμ. ν μ€νΈ μ λ΅κ³Ό μ€μ©μ μΈ κ΅¬ν νμ μμ보μΈμ.
WCAG 2.1 μ€μ: ν μ€νΈ λ° κ΅¬νμ μν κΈλ‘λ² κ°μ΄λ
μ μ λ μνΈ μ°κ²°λλ μΈμμμ λμ§νΈ μ κ·Όμ±μ 보μ₯νλ κ²μ λ¨μν κ·μ μ€μμ λ¬Έμ κ° μλλΌ κΈ°λ³Έμ μΈ μ± μμ λλ€. μΉ μ½ν μΈ μ κ·Όμ± κ°μ΄λλΌμΈ(WCAG) 2.1μ μ₯μ μΈμ΄ μΉ μ½ν μΈ μ λ μ½κ² μ κ·Όν μ μλλ‘ νλ μΈκ³μ μΌλ‘ μΈμ λ νμ€μ μ 곡ν©λλ€. μ΄ μ’ ν© κ°μ΄λμμλ μ μΈκ³ μ¬μ©μμ κ΄λ ¨λ ν μ€νΈ μ λ΅ λ° μ€μ ꡬν μ κ·Ό λ°©μμ λ€λ£¨λ©° WCAG 2.1 μ€μμ λν΄ μμΈν μμλ΄ λλ€.
WCAG 2.1μ΄λ 무μμΈκ°?
WCAG 2.1μ μλ μμ΄λ μΉ μ»¨μμμ(W3C)μ΄ μΉ μ κ·Όμ± μ΄λμ ν°λΈ(WAI)μ μΌνμΌλ‘ κ°λ°ν κ΅μ μ μΌλ‘ μΈμ λ κ°μ΄λλΌμΈ μΈνΈμ λλ€. μ΄λ WCAG 2.0μ κΈ°λ°μΌλ‘ νλ©°, νΉν μΈμ§ λ° νμ΅ μ₯μ κ° μλ μ¬μ©μ, μ μλ ₯ μ¬μ©μ, λͺ¨λ°μΌ κΈ°κΈ°μμ μΉμ μ μνλ μ¬μ©μλ₯Ό μν μ§ννλ μ κ·Όμ± μꡬ μ¬νμ λ€λ£Ήλλ€.
WCAG 2.1μ μ’ μ’ POURμ΄λΌλ μ½μ΄λ‘ κΈ°μ΅λλ λ€ κ°μ§ ν΅μ¬ μμΉμ μ€μ¬μΌλ‘ ꡬμ±λ©λλ€:
- μΈμ κ°λ₯(Perceivable): μ 보μ μ¬μ©μ μΈν°νμ΄μ€ κ΅¬μ± μμλ μ¬μ©μκ° μΈμν μ μλ λ°©μμΌλ‘ μ μλμ΄μΌ ν©λλ€. μ¬κΈ°μλ ν μ€νΈκ° μλ μ½ν μΈ μ λν λ체 ν μ€νΈ μ 곡, λμμμ λν μλ§ μ 곡, μΆ©λΆν μμ λλΉ λ³΄μ₯ λ±μ΄ ν¬ν¨λ©λλ€.
- μ΄μ κ°λ₯(Operable): μ¬μ©μ μΈν°νμ΄μ€ κ΅¬μ± μμμ νμμ μ‘°μν μ μμ΄μΌ ν©λλ€. μ΄λ ν€λ³΄λ μ κ·Όμ±, μ½ν μΈ λ₯Ό μ½κ³ μ¬μ©ν μΆ©λΆν μκ° μ 곡, λ°μμ μΌμΌν¬ μ μλ μ½ν μΈ ννΌ λ±μ ν¬ν¨ν©λλ€.
- μ΄ν΄ κ°λ₯(Understandable): μ 보μ μ¬μ©μ μΈν°νμ΄μ€μ μλμ μ΄ν΄ν μ μμ΄μΌ ν©λλ€. μ΄λ λͺ ννκ³ κ°λ¨ν μΈμ΄ μ¬μ©, μμΈ‘ κ°λ₯ν νμ μ 곡, μ¬μ©μκ° μ€μλ₯Ό νΌνκ³ μμ νλλ‘ λλ κ²μ μλ―Έν©λλ€.
- κ²¬κ³ ν¨(Robust): μ½ν μΈ λ 보쑰 κΈ°μ μ ν¬ν¨ν λ€μν μ¬μ©μ μμ΄μ νΈκ° μμ μ μΌλ‘ ν΄μν μ μμ λ§νΌ μΆ©λΆν κ²¬κ³ ν΄μΌ ν©λλ€. μ΄λ μ ν¨ν HTML μ¬μ© λ° μ κ·Όμ± μ½λ© κ΄ν μ€μλ₯Ό ν¬ν¨ν©λλ€.
WCAG 2.1 μ€μκ° μ μ€μνκ°?
WCAG 2.1μ μ€μνλ©΄ λ€μκ³Ό κ°μ λͺ κ°μ§ μ€μν μ΄μ μ΄ μμ΅λλ€:
- λ²μ μꡬμ¬ν: λ§μ κ΅κ°μ μ§μμλ μΉ μ κ·Όμ±μ μ무ννλ λ²λ₯ λ° κ·μ μ΄ μμΌλ©°, μ’ μ’ WCAGλ₯Ό μ°Έμ‘°ν©λλ€. μλ₯Ό λ€μ΄, λ―Έκ΅μ λ―Έκ΅ μ₯μ μΈλ²(ADA), λ―Έκ΅ μ°λ°© μ λΆμ Section 508, μΊλλ€μ μ¨νλ¦¬μ€ μ₯μ μΈ μ κ·Όμ±λ²(AODA), μ λ½μ EN 301 549λ λͺ¨λ WCAG νμ€μ μꡬνκ±°λ μ°Έμ‘°ν©λλ€. μ΄λ₯Ό μ€μνμ§ μμΌλ©΄ λ²μ μ‘°μΉμ νν μμμ μ΄λν μ μμ΅λλ€.
- μμ₯ μ κ·Όμ± νλ: μΉμ¬μ΄νΈμ μ κ·Όμ±μ λμ΄λ©΄ μ μΈκ³ μλ°±λ§ λͺ μ μ₯μ μΈμ ν¬ν¨ν λ λμ κ³ κ°μΈ΅μκ² λ€κ°κ° μ μμ΅λλ€. μ΄λ νΈλν½, μ°Έμ¬λ, μ μ¬μ μμ΅ μ¦κ°λ‘ μ΄μ΄μ§λλ€.
- λͺ¨λλ₯Ό μν μ¬μ©μ κ²½ν κ°μ : μ κ·Όμ± κ°μ μ μ’ μ’ μ₯μ μΈλΏλ§ μλλΌ λͺ¨λ μ¬μ©μμκ² ννμ μ€λλ€. μλ₯Ό λ€μ΄, λͺ ννκ³ κ°κ²°ν κΈ, μ ꡬ쑰νλ μ½ν μΈ , ν€λ³΄λ νμμ λͺ¨λ μ¬λμ΄ μΉμ¬μ΄νΈλ₯Ό λ μ½κ² μ¬μ©ν μ μκ² λ§λλλ€.
- μ€λ¦¬μ κ³ λ €μ¬ν: μ¨λΌμΈ μ 보μ μλΉμ€μ λν λλ±ν μ κ·Όμ 보μ₯νλ κ²μ μ¬νμ μ± μμ λ¬Έμ μ λλ€. WCAG 2.1 μ€μλ ν¬μ©κ³Ό ννμ±μ΄λΌλ μ€λ¦¬μ μμΉκ³Ό μΌμΉν©λλ€.
- SEO ν₯μ: κ²μ μμ§μ μ’μ μ¬μ©μ κ²½νμ μ 곡νλ μΉμ¬μ΄νΈλ₯Ό μ νΈν©λλ€. μ κ·Όμ± λͺ¨λ² μ¬λ‘λ₯Ό ꡬνν¨μΌλ‘μ¨ μΉμ¬μ΄νΈμ κ²μ μμ§ μμλ₯Ό ν₯μμν¬ μ μμ΅λλ€.
WCAG 2.1 μ±κ³΅ κΈ°μ€: μ¬μΈ΅ λΆμ
WCAG 2.1 μ±κ³΅ κΈ°μ€μ κ° κ°μ΄λλΌμΈμ μΆ©μ‘±νλ λ°©λ²μ μ μνλ ν μ€νΈ κ°λ₯ν λ¬Έμ₯μ λλ€. μ΄λ μΈ κ°μ§ μ€μ μμ€μΌλ‘ λΆλ₯λ©λλ€:
- μμ€ A: κ°μ₯ κΈ°λ³Έμ μΈ μ κ·Όμ± μμ€μ λλ€. μ΄ κΈ°μ€μ μΆ©μ‘±νλ κ²μ μΌλΆ μ¬μ©μκ° μΉμ¬μ΄νΈλ₯Ό μ¬μ©νλ λ° νμμ μ λλ€.
- μμ€ AA: μ₯μ κ° μλ μ¬μ©μκ° κ²ͺλ κ°μ₯ μΌλ°μ μΈ μ₯λ²½μ ν΄κ²°ν©λλ€. μμ€ AAλ μ’ μ’ λ²μ μ€μλ₯Ό μν λͺ©ν μμ€μ λλ€.
- μμ€ AAA: κ°μ₯ λμ μμ€μ μ κ·Όμ±μ λλ€. νμ μμ ν λ¬μ±νκΈ°λ μ΄λ ΅μ§λ§, μμ€ AAA κΈ°μ€μ μΆ©μ‘±νλ©΄ λ λμ λ²μμ μ¬μ©μλ₯Ό μν΄ μ¬μ©μ κ²½νμ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
λ€μμ λ€μν μμ€μ WCAG 2.1 μ±κ³΅ κΈ°μ€μ λͺ κ°μ§ μμ λλ€:
μμ€ A μμ:
- 1.1.1 ν μ€νΈ μλ μ½ν μΈ : ν μ€νΈ μλ λͺ¨λ μ½ν μΈ μ λ체 ν μ€νΈλ₯Ό μ 곡νμ¬ μ¬μ©μκ° νμλ‘ νλ ν° κΈμ¨, μ μ, μμ±, κΈ°νΈ λλ λ κ°λ¨ν μΈμ΄μ κ°μ λ€λ₯Έ ννλ‘ λ³νν μ μλλ‘ ν©λλ€. μ: μ΄λ―Έμ§μ λ΄μ©μ μ€λͺ νλ alt ν μ€νΈ μΆκ°.
- 1.3.1 μ 보 λ° κ΄κ³: ννμ ν΅ν΄ μ λ¬λλ μ 보, ꡬ쑰 λ° κ΄κ³λ νλ‘κ·Έλλ° λ°©μμΌλ‘ κ²°μ λ μ μκ±°λ ν μ€νΈλ‘ μ 곡λ©λλ€. μ: μ λͺ©μλ <h1>-<h6>κ³Ό κ°μ μλ§¨ν± HTML μμλ₯Ό, λͺ©λ‘μλ <ul> λ° <ol>μ μ¬μ©.
- 2.1.1 ν€λ³΄λ: μ½ν μΈ μ λͺ¨λ κΈ°λ₯μ κ°λ³ ν€ μ λ ₯μ νΉμ νμ΄λ°μ μꡬνμ§ μκ³ ν€λ³΄λ μΈν°νμ΄μ€λ₯Ό ν΅ν΄ μ‘°μν μ μμ΄μΌ ν©λλ€. μ: λ²νΌ λ° λ§ν¬μ κ°μ λͺ¨λ μνΈμμ© μμκ° ν€λ³΄λλ§μΌλ‘ μ κ·Όνκ³ νμ±νλ μ μλλ‘ λ³΄μ₯.
μμ€ AA μμ:
- 1.4.3 λͺ μλΉ(μ΅μ): ν μ€νΈ λ° ν μ€νΈ μ΄λ―Έμ§μ μκ°μ ννμ μ΅μ 4.5:1μ λͺ μλΉλ₯Ό κ°μ§λλ€. μ: ν μ€νΈμ λ°°κ²½μ κ°μ μΆ©λΆν μμ λλΉ λ³΄μ₯. WebAIMμ λͺ μλΉ κ²μ¬κΈ°μ κ°μ λκ΅¬κ° λμμ΄ λ μ μμ΅λλ€.
- 2.4.4 λ§ν¬ λͺ©μ (λ§₯λ½ μμμ): κ° λ§ν¬μ λͺ©μ μ λ§ν¬ ν μ€νΈλ§μΌλ‘, λλ λ§ν¬ ν μ€νΈμ νλ‘κ·Έλλ° λ°©μμΌλ‘ κ²°μ λ λ§ν¬ 컨ν μ€νΈλ₯Ό ν¨κ» μ¬μ©νμ¬ νμ ν μ μμ΄μΌ ν©λλ€. λ¨, λ§ν¬μ λͺ©μ μ΄ μΌλ° μ¬μ©μμκ² λͺ¨νΈν κ²½μ°λ μμΈμ λλ€. μ: "μ¬κΈ°λ₯Ό ν΄λ¦νμΈμ"μ κ°μ μΌλ°μ μΈ λ§ν¬ ν μ€νΈλ₯Ό νΌνκ³ λμ "WCAG 2.1μ λν΄ λ μ½μ΄λ³΄κΈ°"μ κ°μ΄ μ€λͺ μ μΈ ν μ€νΈλ₯Ό μ¬μ©.
- 3.1.1 νμ΄μ§ μΈμ΄: κ° νμ΄μ§μ κΈ°λ³Έ μΈκ° μΈμ΄λ νλ‘κ·Έλλ° λ°©μμΌλ‘ κ²°μ λ μ μμ΅λλ€. μ: νμ΄μ§μ μΈμ΄λ₯Ό μ§μ νκΈ° μν΄ <html lang="ko"> μμ±μ μ¬μ©. λ€κ΅μ΄ μΉμ¬μ΄νΈμ κ²½μ° λ€λ₯Έ μΉμ μ λ€λ₯Έ μΈμ΄ μμ±μ μ¬μ©.
μμ€ AAA μμ:
- 1.4.6 λͺ μλΉ(ν₯μ): ν μ€νΈ λ° ν μ€νΈ μ΄λ―Έμ§μ μκ°μ ννμ μ΅μ 7:1μ λͺ μλΉλ₯Ό κ°μ§λλ€. μ: μ΄λ μμ€ AAλ³΄λ€ λμ λͺ μλΉ μꡬμ¬νμ΄λ©°, λ μ¬κ°ν μκ° μ₯μ κ° μλ μ¬μ©μμκ² μ ν©ν©λλ€.
- 2.2.3 νμ΄λ° μμ: νμ΄λ°μ λΉλνν λκΈ°ν λ―Έλμ΄ λ° μ€μκ° μ΄λ²€νΈλ₯Ό μ μΈνκ³ λ μ½ν μΈ κ° μ 곡νλ μ΄λ²€νΈλ νλμ νμμ μΈ λΆλΆμ΄ μλλλ€. μ: μ¬μ©μκ° μνΈμμ© μμμ μκ° μ νμ μΌμ μ€μ§, μ€μ§ λλ μ°μ₯ν μ μλλ‘ νμ©.
- 3.1.3 μμν λ¨μ΄: κ΄μ©κ΅¬ λ° μ λ¬Έ μ©μ΄λ₯Ό ν¬ν¨νμ¬ μ΄λ‘μ μ΄κ±°λ μ νλ λ°©μμΌλ‘ μ¬μ©λ λ¨μ΄ λλ ꡬ문μ νΉμ μ μλ₯Ό μλ³νλ λ©μ»€λμ¦μ μ¬μ©ν μ μμ΅λλ€. μ: μ λ¬Έ μ©μ΄λ μμ΄λ₯Ό μ€λͺ νκΈ° μν΄ μ©μ΄μ§ λλ ν΄ν μ 곡.
WCAG 2.1 μ€μλ₯Ό μν ν μ€νΈ μ λ΅
μ² μ ν ν μ€νΈλ WCAG 2.1 μ€μλ₯Ό 보μ₯νλ λ° λ§€μ° μ€μν©λλ€. μλνλ ν μ€νΈμ μλ ν μ€νΈ λ°©λ²μ μ‘°ν©νμ¬ μ¬μ©νλ κ²μ΄ μ’μ΅λλ€.
μλνλ ν μ€νΈ:
μλνλ ν μ€νΈ λꡬλ λλ½λ alt ν μ€νΈ, λΆμΆ©λΆν μμ λλΉ, κΉ¨μ§ λ§ν¬μ κ°μ μΌλ°μ μΈ μ κ·Όμ± λ¬Έμ λ₯Ό μ μνκ² μλ³ν μ μμ΅λλ€. μ΄λ¬ν λꡬλ μ 체 μΉμ¬μ΄νΈλ₯Ό μ€μΊνκ³ μ μ¬μ μΈ λ¬Έμ λ₯Ό κ°μ‘°νλ λ³΄κ³ μλ₯Ό μμ±ν μ μμ΅λλ€. κ·Έλ¬λ μλνλ ν μ€νΈλ§μΌλ‘λ μ μ©μ± λ° μ»¨ν μ€νΈμ κ΄λ ¨λ μ κ·Όμ± λ¬Έμ λ₯Ό λͺ¨λ κ°μ§ν μ μμΌλ―λ‘ μΆ©λΆνμ§ μμ΅λλ€.
μλνλ ν μ€νΈ λꡬμ μ:
- WAVE (Web Accessibility Evaluation Tool): μ κ·Όμ± λ¬Έμ μ λν μκ°μ νΌλλ°±μ μ 곡νλ λ¬΄λ£ λΈλΌμ°μ νμ₯ νλ‘κ·Έλ¨ λ° μ¨λΌμΈ λꡬ.
- AXE (Accessibility Engine): μλνλ ν μ€νΈ μν¬νλ‘μ°μ ν΅ν©ν μ μλ μ€ν μμ€ JavaScript λΌμ΄λΈλ¬λ¦¬.
- Lighthouse (Google Chrome DevTools): μ κ·Όμ±μ ν¬ν¨νμ¬ μΉ νμ΄μ§μ νμ§μ κ°μ νκΈ° μν μλνλ λꡬ.
- Tenon.io: μμΈν μ κ·Όμ± λ³΄κ³ μλ₯Ό μ 곡νκ³ λ€μν κ°λ° λꡬμ ν΅ν©λλ μ λ£ μλΉμ€.
μλνλ ν μ€νΈλ₯Ό μν λͺ¨λ² μ¬λ‘:
- κ°λ° μν¬νλ‘μ°μ μλνλ ν μ€νΈλ₯Ό ν΅ν©ν©λλ€.
- κ° μ½λ λ³κ²½ νμ κ°μ΄ μ κΈ°μ μΌλ‘ μλνλ ν μ€νΈλ₯Ό μ€νν©λλ€.
- λ ν¬κ΄μ μΈ νκ°λ₯Ό μν΄ μ¬λ¬ μλνλ ν μ€νΈ λꡬλ₯Ό μ¬μ©ν©λλ€.
- μλνλ ν μ€νΈ κ²°κ³Όλ₯Ό μΆκ° μ‘°μ¬λ₯Ό μν μΆλ°μ μΌλ‘ κ°μ£Όν©λλ€.
μλ ν μ€νΈ:
μλ ν μ€νΈλ μ₯μ κ° μλ μ¬μ©μμ κ΄μ μμ μΉ μ½ν μΈ μ κΈ°λ₯μ κ²ν νλ κ²μ ν¬ν¨ν©λλ€. μ΄λ¬ν μ νμ ν μ€νΈλ μ μ©μ± λ¬Έμ , ν€λ³΄λ νμ λ¬Έμ , μλ§¨ν± μ€λ₯μ κ°μ΄ μλνλ λκ΅¬κ° κ°μ§ν μ μλ μ κ·Όμ± λ¬Έμ λ₯Ό μλ³νλ λ° νμμ μ λλ€.
μλ ν μ€νΈ κΈ°λ²:
- ν€λ³΄λ νμ ν μ€νΈ: λͺ¨λ μνΈμμ© μμκ° ν€λ³΄λλ§μΌλ‘ μ κ·Όνκ³ νμ±νλ μ μλμ§ νμΈν©λλ€.
- μ€ν¬λ¦° 리λ ν μ€νΈ: NVDA(λ¬΄λ£ μ€ν μμ€) λλ JAWS(μμ©)μ κ°μ μ€ν¬λ¦° 리λλ₯Ό μ¬μ©νμ¬ μκ° μ₯μ μΈ μ¬μ©μκ° μΉμ¬μ΄νΈλ₯Ό κ²½ννλ λ°©μμ 체νν©λλ€. μ¬κΈ°μλ μ½ν μΈ λ£κΈ°, μ λͺ© λ° λλλ§ν¬λ₯Ό μ¬μ©νμ¬ νμνκΈ°, μμ μμμ μνΈμμ©νκΈ°κ° ν¬ν¨λ©λλ€.
- νλ ν μ€νΈ: νλ©΄ λ보기λ₯Ό μ¬μ©νμ¬ λ€μν νλ/μΆμ μμ€μμ μΉμ¬μ΄νΈμ μ μ©μ±μ ν μ€νΈν©λλ€. μ½ν μΈ κ° μ¬λ°λ₯΄κ² 리νλ‘μ°λκ³ μ λ³΄κ° μμ€λμ§ μλμ§ νμΈν©λλ€.
- μμ λλΉ ν μ€νΈ: μμ λλΉ λΆμκΈ° λꡬλ₯Ό μ¬μ©νμ¬ μμ λλΉμ¨μ μλμΌλ‘ νμΈν©λλ€.
- μΈμ§μ μ κ·Όμ± ν μ€νΈ: μΉμ¬μ΄νΈμμ μ¬μ©λλ μΈμ΄μ λͺ νμ±κ³Ό λ¨μμ±μ νκ°ν©λλ€. μ§μΉ¨μ΄ λͺ ννκ³ κ°κ²°νλ©° νμμ΄ μμΈ‘ κ°λ₯νμ§ νμΈν©λλ€.
μ₯μ κ° μλ μ¬μ©μ μ°Έμ¬:
μ κ·Όμ±μ 보μ₯νλ κ°μ₯ ν¨κ³Όμ μΈ λ°©λ²μ ν μ€νΈ κ³Όμ μ μ₯μ κ° μλ μ¬μ©μλ₯Ό μ°Έμ¬μν€λ κ²μ λλ€. μ΄λ μ¬μ©μ ν μ€νΈ μΈμ , ν¬μ»€μ€ κ·Έλ£Ή λλ μ₯μ κ° μλ μ κ·Όμ± μ»¨μ€ν΄νΈκ° μννλ μ κ·Όμ± κ°μ¬λ₯Ό ν΅ν΄ μνν μ μμ΅λλ€. κ·Έλ€μ μ€μ κ²½νκ³Ό ν΅μ°°λ ₯μ μ¬λ¬λΆμ΄ λμΉ μ μλ μ κ·Όμ± λ¬Έμ λ₯Ό μλ³νκ³ ν΄κ²°νλ λ° λμμ΄ λλ κ·μ€ν νΌλλ°±μ μ 곡ν μ μμ΅λλ€.
μ κ·Όμ± κ°μ¬:
μ κ·Όμ± κ°μ¬λ μΉμ¬μ΄νΈλ μ ν리μΌμ΄μ μ μ κ·Όμ± μ₯λ²½μ μλ³νκ³ WCAG 2.1 μ€μ μ¬λΆλ₯Ό νκ°νλ ν¬κ΄μ μΈ νκ°μ λλ€. κ°μ¬λ μΌλ°μ μΌλ‘ μλνλ ν μ€νΈμ μλ ν μ€νΈ κΈ°λ²μ μ‘°ν©νμ¬ μ¬μ©νλ μ κ·Όμ± μ λ¬Έκ°μ μν΄ μνλ©λλ€. κ°μ¬ λ³΄κ³ μλ μ κ·Όμ± λ¬Έμ μ μμΈν λͺ©λ‘κ³Ό ν¨κ» κ°μ κΆμ₯ μ¬νμ μ 곡ν©λλ€.
μ κ·Όμ± κ°μ¬μ μ’ λ₯:
- κΈ°μ€μ κ°μ¬: μΉμ¬μ΄νΈμ μ λ°μ μΈ μ κ·Όμ±μ λν ν¬κ΄μ μΈ νκ°.
- λμ κ°μ¬: μΉμ¬μ΄νΈμ νΉμ μμ λλ νΉμ μ νμ μ κ·Όμ± λ¬Έμ μ μ΄μ μ λ§μΆ₯λλ€.
- νκ· κ°μ¬: μ½λ λ³κ²½ λλ μ λ°μ΄νΈ ν μλ‘μ΄ μ κ·Όμ± λ¬Έμ κ° μλμ§ νμΈν©λλ€.
WCAG 2.1 μ€μλ₯Ό μν ꡬν μ λ΅
WCAG 2.1μ ꡬννλ €λ©΄ μ κ·Ήμ μ΄κ³ 체κ³μ μΈ μ κ·Όμ΄ νμν©λλ€. μ΄λ μΌνμ± μμ μ΄ μλλΌ κ°λ° λΌμ΄νμ¬μ΄ν΄μ ν΅ν©λμ΄μΌ νλ μ§μμ μΈ νλ‘μΈμ€μ λλ€.
κ³ν λ° μ°μ μμ μ€μ :
- μ κ·Όμ± μ μ± κ°λ°: μ‘°μ§μ μ κ·Όμ±μ λν μ½μμ λͺ ννκ² μ μν©λλ€.
- μ΄κΈ° μ κ·Όμ± κ°μ¬ μν: μΉμ¬μ΄νΈμ νμ¬ μ κ·Όμ± μνλ₯Ό νμ ν©λλ€.
- κ°μ μμ μ μ°μ μμ μ€μ : κ°μ₯ μ€μν μ κ·Όμ± λ¬Έμ λ₯Ό λ¨Όμ ν΄κ²°νλ λ° μ§μ€ν©λλ€. μμ€ A λ¬Έμ λ μμ€ AAλ³΄λ€ λ¨Όμ , μμ€ AAλ μμ€ AAAλ³΄λ€ λ¨Όμ ν΄κ²°ν΄μΌ ν©λλ€.
- μ κ·Όμ± λ‘λλ§΅ μμ±: WCAG 2.1 μ€μλ₯Ό λ¬μ±νκ³ μ μ§νκΈ° μν΄ μ·¨ν λ¨κ³λ₯Ό κ°κ΄μ μΌλ‘ μ€λͺ ν©λλ€.
κ°λ° μν¬νλ‘μ°μ μ κ·Όμ± ν΅ν©:
- κ°λ°μ λ° λμμ΄λλ₯Ό μν μ κ·Όμ± κ΅μ‘: WCAG 2.1 κ°μ΄λλΌμΈ λ° μ κ·Όμ± λͺ¨λ² μ¬λ‘μ λν κ΅μ‘μ μ 곡ν©λλ€.
- μ κ·Όμ± μλ μ½λ© κ΄ν μ¬μ©: μλ§¨ν± HTMLμ μμ±νκ³ , ARIA μμ±μ μ μ νκ² μ¬μ©νλ©°, μΆ©λΆν μμ λλΉλ₯Ό 보μ₯ν©λλ€.
- μ κ·Όμ± μλ κ΅¬μ± μμ λ° λΌμ΄λΈλ¬λ¦¬ μ ν: μ κ·Όμ±μ κ³ λ €νμ¬ μ€κ³λ μ¬μ ꡬμΆλ UI κ΅¬μ± μμ λ° λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©ν©λλ€.
- CI/CD νμ΄νλΌμΈμ μ κ·Όμ± ν μ€νΈ ν΅ν©: λΉλ νλ‘μΈμ€μ μΌλΆλ‘ μ κ·Όμ± ν μ€νΈλ₯Ό μλνν©λλ€.
- μ κΈ°μ μΈ μ κ·Όμ± κ²ν μν: μΉμ¬μ΄νΈκ° μ§νν¨μ λ°λΌ μ κ·Όμ±μ μ μ§νλμ§ μ κΈ°μ μΌλ‘ κ²ν ν©λλ€.
μ½ν μΈ μ μ λͺ¨λ² μ¬λ‘:
- λͺ¨λ ν μ€νΈ μλ μ½ν μΈ μ λ체 ν μ€νΈ μ 곡: μ΄λ―Έμ§μλ μ€λͺ μ μΈ alt ν μ€νΈλ₯Ό, λΉλμ€μλ μλ§μ, μ€λμ€ νμΌμλ μ€ν¬λ¦½νΈλ₯Ό μμ±ν©λλ€.
- λͺ ννκ³ κ°κ²°ν μΈμ΄ μ¬μ©: μ λ¬Έ μ©μ΄μ κΈ°μ μ©μ΄λ₯Ό νΌν©λλ€. μ΄ν΄νκΈ° μ¬μ΄ νμ΄ν μΈμ΄λ‘ μμ±ν©λλ€.
- μ½ν μΈ λ₯Ό λ Όλ¦¬μ μΌλ‘ ꡬ쑰ν: μ λͺ©, λΆμ λͺ©, λͺ©λ‘μ μ¬μ©νμ¬ μ½ν μΈ λ₯Ό ꡬμ±ν©λλ€.
- λ§ν¬κ° μ€λͺ μ μ΄λλ‘ λ³΄μ₯: "μ¬κΈ°λ₯Ό ν΄λ¦νμΈμ"μ κ°μ μΌλ°μ μΈ λ§ν¬ ν μ€νΈλ₯Ό νΌν©λλ€. λ§ν¬μ λͺ©μ μ λͺ ννκ² λνλ΄λ μ€λͺ μ μΈ ν μ€νΈλ₯Ό μ¬μ©ν©λλ€.
- μΆ©λΆν μμ λλΉ μ 곡: ν μ€νΈμ λ°°κ²½μ κ°μ μΆ©λΆν μμ λλΉκ° μλμ§ νμΈν©λλ€.
- μ 보λ₯Ό μ λ¬νκΈ° μν΄ μμλ§ μ¬μ©νλ κ²μ νΌν¨: ν μ€νΈλ κΈ°νΈμ κ°μ΄ μ 보λ₯Ό μ΄ν΄ν μ μλ λ체 λ°©λ²μ μ 곡ν©λλ€.
보쑰 κΈ°μ κ³ λ €μ¬ν:
- μ€ν¬λ¦° 리λ: μ½ν μΈ κ° μ맨ν±νκ² κ΅¬μ‘°νλκ³ ARIA μμ±μ΄ μ¬λ°λ₯΄κ² μ¬μ©λμλμ§ νμΈν©λλ€. μ€ν¬λ¦° 리λ(NVDA, JAWS, VoiceOver)λ μ½λλ₯Ό λ€λ₯΄κ² ν΄μνλ―λ‘ μ¬λ¬ μ€ν¬λ¦° 리λλ‘ ν μ€νΈν©λλ€.
- νλ©΄ λ보기: 리νλ‘μ°λ₯Ό κ³ λ €νμ¬ λμμΈν©λλ€. μ½ν μΈ λ νλ μ μ 보λ κΈ°λ₯μ μμ€ μμ΄ μ μν΄μΌ ν©λλ€.
- μμ± μΈμ μννΈμ¨μ΄ (μ: Dragon NaturallySpeaking): λͺ¨λ κΈ°λ₯μ΄ μμ± λͺ λ Ήμ ν΅ν΄ νμ±νλ μ μλμ§ νμΈν©λλ€. μμ μμλ₯Ό μ μ νκ² λ μ΄λΈλ§ν©λλ€.
- λ체 μ λ ₯ μ₯μΉ (μ: μ€μμΉ μ₯μΉ): ν€λ³΄λ μ κ·Όμ± λ° μ¬μ©μ μ μ κ°λ₯ν ν€λ³΄λ λ¨μΆν€λ₯Ό 보μ₯ν©λλ€.
κΈλ‘λ² κ³ λ €μ¬ν:
- μΈμ΄: μ½ν μΈ μ μΈμ΄λ₯Ό μ§μ νκΈ° μν΄ `lang` μμ±μ μ¬λ°λ₯΄κ² μ¬μ©ν΄μΌ ν©λλ€. μ¬λ¬ μΈμ΄λ‘ λ μ½ν μΈ μ λν λ²μμ μ 곡ν©λλ€.
- λ¬Έμ μ§ν©: λ€μν λ¬Έμλ₯Ό μ§μνκΈ° μν΄ UTF-8 μΈμ½λ©μ μ¬μ©ν©λλ€.
- λ μ§ λ° μκ° νμ: κ΅μ νμ€ λ μ§ λ° μκ° νμ(μ: ISO 8601)μ μ¬μ©ν©λλ€.
- ν΅ν: λμ κ³ κ°μκ² μ ν©ν ν΅ν κΈ°νΈμ μ½λλ₯Ό μ¬μ©ν©λλ€.
- λ¬Ένμ λ―Όκ°μ±: λ¬Ένμ μ°¨μ΄λ₯Ό μ λ νκ³ κ³΅κ²©μ μ΄κ±°λ λΆμ μ ν μ μλ μ΄λ―Έμ§λ μΈμ΄ μ¬μ©μ νΌν©λλ€. μλ₯Ό λ€μ΄, νΉμ μμμ΄λ κΈ°νΈλ λ¬Ένμ λ°λΌ λ€λ₯Έ μλ―Έλ₯Ό κ°μ§ μ μμ΅λλ€.
μμ: μ κ·Όμ± μλ μμ ꡬννκΈ°
μ κ·Όμ± μλ μμμ μ¬μ©μ μνΈμμ©μ λ§€μ° μ€μν©λλ€. ꡬν λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€:
- <label> μμ μ¬μ©: `for` μμ±μ μ¬μ©νμ¬ λ μ΄λΈμ μμ νλμ μ°κ²°ν©λλ€. μ΄λ νλμ λͺ©μ μ λν λͺ νν μ€λͺ μ μ 곡ν©λλ€.
- νμν κ²½μ° ARIA μμ± μ¬μ©: λ μ΄λΈμ μμ νλμ μ§μ μ°κ²°ν μ μλ κ²½μ°, `aria-label` λλ `aria-describedby`μ κ°μ ARIA μμ±μ μ¬μ©νμ¬ μΆκ° μ 보λ₯Ό μ 곡ν©λλ€.
- λͺ νν μ€λ₯ λ©μμ§ μ 곡: μ¬μ©μκ° μ ν¨νμ§ μμ λ°μ΄ν°λ₯Ό μ λ ₯νλ©΄, μ€λ₯λ₯Ό μμ νλ λ°©λ²μ μλ €μ£Όλ λͺ ννκ³ κ΅¬μ²΄μ μΈ μ€λ₯ λ©μμ§λ₯Ό μ 곡ν©λλ€.
- fieldset λ° legend μμ μ¬μ©: `<fieldset>` λ° `<legend>` μμλ₯Ό μ¬μ©νμ¬ κ΄λ ¨λ μμ νλλ₯Ό κ·Έλ£Ήννκ³ κ·Έλ£Ήμ λν μ€λͺ μ μ 곡ν©λλ€.
- ν€λ³΄λ μ κ·Όμ± λ³΄μ₯: μ¬μ©μκ° ν€λ³΄λλ§μΌλ‘ μμ νλλ₯Ό νμν μ μλλ‘ ν©λλ€.
HTML μμ:
<form>
<fieldset>
<legend>μ°λ½μ² μ 보</legend>
<label for="name">μ΄λ¦:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">μ΄λ©μΌ:</label>
<input type="email" id="email" name="email" required aria-describedby="emailHelp"><br>
<small id="emailHelp">κ·νμ μ΄λ©μΌμ λ€λ₯Έ μ¬λκ³Ό μ λ 곡μ νμ§ μμ΅λλ€.</small><br><br>
<button type="submit">μ μΆ</button>
</fieldset>
</form>
WCAG 2.1 μ€μ μ μ§νκΈ°
WCAG 2.1 μ€μλ μΌνμ± μ±κ³Όκ° μλλΌ μ§μμ μΈ κ³Όμ μ λλ€. μΉμ¬μ΄νΈμ μ ν리μΌμ΄μ μ λμμμ΄ μ§ννλ―λ‘, μ κ·Όμ± λ¬Έμ λ₯Ό μ κΈ°μ μΌλ‘ λͺ¨λν°λ§νκ³ ν μ€νΈνλ κ²μ΄ μ€μν©λλ€.
μ κΈ°μ μΈ λͺ¨λν°λ§ λ° ν μ€νΈ:
- μ κΈ°μ μΈ μ κ·Όμ± κ°μ¬λ₯Ό μν μΌμ μ μ립ν©λλ€.
- κ°λ° μν¬νλ‘μ°μ μλνλ μ κ·Όμ± ν μ€νΈλ₯Ό ν΅ν©ν©λλ€.
- μ¬μ©μκ° μ κ·Όμ± λ¬Έμ λ₯Ό λ³΄κ³ νλλ‘ μ₯λ €ν©λλ€.
- μ΅μ μ κ·Όμ± κ°μ΄λλΌμΈ λ° λͺ¨λ² μ¬λ‘μ λν μ 보λ₯Ό κ³μ μ λ°μ΄νΈν©λλ€.
κ΅μ‘ λ° μΈμ:
- μΉμ¬μ΄νΈ κ°λ° λ° μ μ§λ³΄μμ κ΄λ ¨λ λͺ¨λ μ§μμκ² μ§μμ μΈ μ κ·Όμ± κ΅μ‘μ μ 곡ν©λλ€.
- μ‘°μ§ μ 체μ μ κ·Όμ± μΈμμ μ¦μ§ν©λλ€.
- ν¬μ©κ³Ό μ κ·Όμ±μ λ¬Ένλ₯Ό μ₯λ €ν©λλ€.
κ²°λ‘
WCAG 2.1 μ€μλ μ μΈκ³ μ¬μ©μλ₯Ό μν μ κ·Όμ± λμ λμ§νΈ κ²½νμ λ§λλ λ° νμμ μ λλ€. WCAG 2.1μ μμΉμ μ΄ν΄νκ³ , ν¨κ³Όμ μΈ ν μ€νΈ μ λ΅μ ꡬννλ©°, κ°λ° μν¬νλ‘μ°μ μ κ·Όμ±μ ν΅ν©ν¨μΌλ‘μ¨, λ₯λ ₯μ κ΄κ³μμ΄ λͺ¨λ μ¬λμ΄ κ·νμ μΉμ¬μ΄νΈμ μ κ·Όν μ μλλ‘ λ³΄μ₯ν μ μμ΅λλ€. μ κ·Όμ±μ λ¨μν κ·μ μ€μμ κ΄ν κ²μ΄ μλλΌ, λ ν¬μ©μ μ΄κ³ 곡νν λμ§νΈ μΈμμ λ§λλ κ²μμ κΈ°μ΅νμμμ€.